// import {React} form  'react'
import React, { useState } from "react";

import "../../../static/font/iconfont.css";
import { AddBuildingMap } from "../AddBuildingMap/AddBuildingMap";

import {
    Form,
    Input,
    Button,
    Select,
    Image,
    Modal,
    DatePicker,

} from "antd";
import { ExclamationCircleOutlined } from "@ant-design/icons";


const { Option } = Select;
const { confirm } = Modal;
export const Sbxq = (props) => {
    const [form] = Form.useForm();

    const layout = {
        labelCol: {
            span: 6,
        },
        wrapperCol: {
            span: 14,
        },
    };

    //返回页面
    const backCar = () => {
        props.setSbxq(false);
    };
    const close = () => {
        confirm({
            icon: <ExclamationCircleOutlined />,
            content: "您确定离开此页面吗？",
            cancelText: "取消",
            okText: "确定",
            onOk() {
                //   console.log('OK');
                backCar();
            },
            onCancel() {
                console.log("Cancel");
            },
        });
    };
    const onFinish = (values) => {
        console.log(values);
    };
    let text = JSON.parse(sessionStorage.getItem('text'))
    console.log(text.name);
    form.setFieldsValue({
        name:text.name,
        bianhao:text.id,
        leixing:text.model,
        yunxing:text.newTime,
        zhuantai:text.type,
    })



    return (

        <div className="xinzeng" style={{ padding: 0 }}>

            <div className="content" style={{ padding: 0 }}>
                {/* 左边的框框 */}
                <div>
                    <p>基本设备信息:</p>
                    <Form
                        {...layout}
                        form={form}
                        name="control-hooks"
                        onFinish={onFinish}
                    >
                        <Form.Item
                            name="name"
                            label="设备名称"
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Input disabled />
                        </Form.Item>
                        <Form.Item
                            name="bianhao"
                            label="设备编号"
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Input disabled />
                        </Form.Item>
                        <Form.Item
                            name="leixing"
                            label="设备型号"
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Input disabled />
                        </Form.Item>
                        <Form.Item
                            name="yunxing"
                            label="运行时间"
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Input disabled />
                            {/* <DatePicker className="width_centent" /> */}
                        </Form.Item>
                        <Form.Item
                            name="zhuantai"
                            label="运行状态"
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Select placeholder="" allowClear>
                                <Option value="正常">正常</Option>
                                <Option value="禁用">禁用</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item
                            name="people"
                            label="跟进人"
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Input disabled />
                        </Form.Item>
                        <Form.Item
                            name="tel"
                            label="联系方式"
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Input disabled />
                        </Form.Item>

                    </Form>
                </div>
                {/* 右边的框框 */}
                <div>
                    <p>设备详细信息:</p>
                    <div>
                        <div>
                            <Form
                                {...layout}
                                form={form}
                                name="control-hooks"
                                onFinish={onFinish}
                            >
                                <Form.Item
                                    name="carBrand"
                                    label="安装位置"
                                    rules={[
                                        {
                                            required: true,
                                        },
                                    ]}
                                >
                                    <Input disabled />
                                </Form.Item>
                                <Form.Item>
                                    <div className="ditu" style={{ marginLeft: '70px' }}>
                                        <AddBuildingMap />
                                    </div>
                                </Form.Item>
                            </Form>
                        </div>
                        <div>
                            <Form
                                {...layout}
                                form={form}
                                name="control-hooks"
                                onFinish={onFinish}
                            >
                                <Form.Item
                                    name="xiancang"
                                    label="现场照片:"
                                    rules={[
                                        {
                                            required: true,
                                        },
                                    ]}
                                >

                                    <Image src="https://cdn3.axureshop.com/demo/1968221/images/%E8%AE%BE%E5%A4%87%E8%AF%A6%E6%83%85/u9005.png"></Image>
                                </Form.Item>
                                <Form.Item
                                    name="xiancang"
                                    label="设备照片:"
                                    rules={[
                                        {
                                            required: true,
                                        },
                                    ]}
                                >

                                    <Image src="https://cdn3.axureshop.com/demo/1968221/images/%E8%AE%BE%E5%A4%87%E8%AF%A6%E6%83%85/u9006.png"
                                        style={{ width: '120px', height: '150px' }}></Image>
                                </Form.Item>
                            </Form>

                        </div>

                    </div>
                </div>
                <div>
                    <Button style={{ width: '100px', position: 'absolute', top: '800px', right: '600px' }} size='large' onClick={close}>关闭</Button>
                </div>

            </div>

        </div>


    );
};
export default Sbxq;
